/*
 * @Author: 王文晓wangwenxiao 3069459335@qq.com
 * @Date: 2025-08-17 15:29:29
 * @LastEditors: 王文晓wangwenxiao 3069459335@qq.com
 * @LastEditTime: 2025-08-17 20:27:18
 * @FilePath: \intelligent-terminal---react\src\components\login\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Input, Checkbox, Button, message } from 'antd'
import { useState } from 'react'
import './index.less'
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons'
import { getUserInfoDetails } from '../../apis/index'
import { useNavigate } from 'react-router-dom'
import {setIsRemeber} from '../../store/modules/login.ts'
import {useDispatch,useSelector} from 'react-redux'
/**
 * 登录组件
 * 用于用户登录界面，包含手机号输入框、密码输入框、记住密码选项和登录按钮
 */
function Login() {
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const [phonenum, setPhonenum] = useState<string>('')
  const [password, setpassword] = useState<string>('')
  // const [isRemeber, setIsRemeber] = useState<boolean>(false)
  const {isRemeber} = useSelector(state=>state.isRemeber)
  const [messageApi, contextHolder] = message.useMessage()
  const loginHandler = async () => {
    if (!phonenum) {
      messageApi.open({
        type: 'error',
        content: '请输入电话号码',
      })
      return
      // messageApi.error('请输入电话号码')
    }
    if (!password) {
      messageApi.open({
        type: 'error',
        content: '请输入密码',
      })
      return
    }
    try {
      const res = await getUserInfoDetails({ tyid: phonenum, password })
      if (res.data.code === 0) {
        messageApi.open({
          type: 'success',
          content: '登录成功',
        })
        // 登录成功后自动跳转到首页
        navigate('/')
      }
    } catch (error: unknown) {
      // 将错误对象断言为包含特定结构的类型
      const axiosError = error as { response?: { data?: { message?: string } }; message?: string }
      // 使用messageApi打开错误提示框
      messageApi.open({
        type: 'error', // 提示框类型为错误
        content: '登录失败' + (axiosError.response?.data?.message || axiosError.message || '未知错误'),
      })
    }
    console.log('登录', phonenum, password, isRemeber)
  }
  return (
    <div className="box">
      {contextHolder}
      <div className="user-login">
        <div>
          <Input className="phone-num login-input" placeholder="请输入账号" value={phonenum} onChange={(e) => setPhonenum(e.target.value)} />
        </div>
        <div>
          <Input.Password className="phone-password login-input" placeholder="请输入密码" value={password} onChange={(e) => setpassword(e.target.value)} iconRender={(visible) => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)} />
        </div>
        <div className="remeberBox">
          <Checkbox checked={isRemeber} onChange={(e) => dispatch(setIsRemeber(e.target.checked))}>
            记住密码
          </Checkbox>
        </div>

        <Button className="login-btn login-input" onClick={loginHandler}>
          登录
        </Button>
      </div>
    </div>
  )
}

export default Login
